<template>
    <div class="p-2">
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col class="header-button-container" :span="1.5">
                        <el-button type="success" plain icon="Plus" @click="handleClickAddTotalCategory">新增</el-button>
                    </el-col>
                </el-row>
            </template>
            <el-table :data="categoryList">
                <el-table-column label="材料大类名称" prop="majorName" align="center"></el-table-column>
                <el-table-column label="材料大类类型" prop="majorType" align="center"></el-table-column>
                <el-table-column label="材料类别" prop="materialType" align="center"></el-table-column>
                <el-table-column label="材料小类" align="center">
                    <template #default="scope">
                        <el-link type="primary" @click="handleClickSingleCategory(scope.row)">查看材料小类</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button link type="primary" :style="{fontSize:'16px'}" icon="Edit" @click="handleClickEdit(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="danger" :style="{fontSize:'16px'}"  icon="Delete" @click="handleClickDelete(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getTotalCategoryList" />
        </el-card>
        <el-dialog v-model="addTotalCategoryVisible" title="新增材料大类" width="25%" @close="handleCloseTotalCategory" destory-on-close>
            <el-form :model="addFormData" ref="addFormRef" label-width="auto" >
                <el-form-item label="材料大类名称" prop="majorName" label-position="right">
                    <el-input v-model="addFormData.majorName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="材料大类类型" prop="majorType" label-position="right">
                    <el-input v-model="addFormData.majorType" placeholder="请输入" maxlength="32" show-word-limit />
                </el-form-item>
                <el-form-item label="材料类别" prop="materialType" label-position="right">
                    <el-input v-model="addFormData.materialType" placeholder="请输入" maxlength="32" show-word-limit />
                </el-form-item>
                <el-form-item label="备注" prop="remark" label-position="right">
                    <el-input type="textarea" maxlength="125" show-word-limit v-model="addFormData.remark" placeholder="请输入" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="handleSubmitAddTotalCategory" >确 定</el-button>
                    <el-button @click="handleCloseTotalCategory">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="editTotalCategoryVisible" title="编辑材料大类" width="25%" @close="handleCloseEdit" destory-on-close>
            <el-form :model="editFormData" ref="editFormRef" label-width="auto">
                <el-form-item label="材料大类名称" prop="majorName" label-position="right">
                    <el-input v-model="editFormData.majorName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="材料大类类型" prop="majorType" label-position="right">
                    <el-input v-model="editFormData.majorType" placeholder="请输入" maxlength="32" show-word-limit />
                </el-form-item>
                <el-form-item label="材料类别" prop="materialType" label-position="right">
                    <el-input v-model="editFormData.materialType" placeholder="请输入" maxlength="32" show-word-limit />
                </el-form-item>
                <el-form-item label="备注" prop="remark" label-position="right">
                    <el-input type="textarea" maxlength="125" show-word-limit v-model="editFormData.remark" placeholder="请输入" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="handleSubmitEdit" >确 定</el-button>
                    <el-button @click="handleCloseEdit">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { addTotalCategoryApi,getTotalCategoryListApi,getTotalCategoryDetailApi,editTotalCategoryApi,deleteTotalCategoryApi } from '@/api/sj/warehouse/typeManagement';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const categoryList = ref<any[]>([]);
const totalData = ref(0);
const loading = ref(false);
const addTotalCategoryVisible = ref(false);
const editTotalCategoryVisible = ref(false);
const addFormRef = ref<FormInstance>();
const editFormRef = ref<FormInstance>();
const data = reactive({
    queryParams:{
        pageNum: 1,
        pageSize: 30
    },
    addFormData: {
        majorType: undefined,
        majorName: undefined,
        materialType: undefined,
        remark: undefined
    },
    editFormData: {
        majorType: undefined,
        majorName: undefined,
        materialType: undefined,
        remark: undefined
    }
});
const { queryParams,addFormData,editFormData } = toRefs(data);
const router = useRouter();

/** 获取所有材料大类 */
const getTotalCategoryList = async () => {
    loading.value = true;
    const {total, rows} = await getTotalCategoryListApi({...queryParams.value});
    totalData.value = total;
    categoryList.value = rows;
    loading.value = false;
};

/** 点击新增材料大类 */
const handleClickAddTotalCategory = () => {
    addTotalCategoryVisible.value = true;
};

const handleCloseTotalCategory = () => {
    addFormRef.value?.resetFields();
    addTotalCategoryVisible.value = false;
};

/** 提交新增材料大类 */
const handleSubmitAddTotalCategory = async () => {
    const result = await addTotalCategoryApi({...addFormData.value});
    if(result.code == 200){
        handleCloseTotalCategory();
        getTotalCategoryList();
    };
};

/** 点击查看材料小类 */
const handleClickSingleCategory = (row: any) => {
    router.push(`/warehouse/materialSubclass/${row.majorType}`);
};

/** 点击编辑材料大类 */
const handleClickEdit = async (row: any) => {
    const {code,data} = await getTotalCategoryDetailApi(row.id);
    if(code == 200){
        editFormData.value = {...data};
        editTotalCategoryVisible.value = true;
    }
};

/** 点击关闭编辑 */
const handleCloseEdit = () => {
    editFormRef.value?.resetFields();
    editTotalCategoryVisible.value = false;
};

/** 提交编辑 */
const handleSubmitEdit = async () => {
    const { code } = await editTotalCategoryApi({...editFormData.value});
    if(code == 200){
        handleCloseEdit();
        getTotalCategoryList();
    };
};

/** 点击删除材料大类 */
const handleClickDelete = async (row: any) => {
    await proxy?.$modal.confirm("确定删除该材料大类么？");
    const result = await deleteTotalCategoryApi(row.id);
    if(result.code == 200){
        proxy?.$modal.msgSuccess("删除成功");
        getTotalCategoryList();
    };
};

onMounted(()=>{
    getTotalCategoryList();
});
</script>

<style lang="scss" scoped>
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>